<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>owner.html</title>

    <!-- 引入资源 -->
    <script src="/js/vue.js"></script>
    <script src="/js/axios-0.18.0.js"></script>

    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

<!--    <link rel="stylesheet" href="/plugins/elementui/index.css">-->
<!--    <script src="/plugins/elementui/index.js"></script>-->
    <!--导入axios二次封装的工具-->
    <script src="/js/request.js"></script>

</head>
<body>

<div id="app">

    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="updateDialogVisible = true">添加</el-button>

    <el-input
            placeholder="请输入业主姓名"
            prefix-icon="el-icon-search"
            clearable style="width:160px" v-model="ownerQueryDTO.userName">
    </el-input>
    <el-select v-model="ownerQueryDTO.sex" clearable placeholder="性别请选择">
        <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
        </el-option>
    </el-select>
    <el-input
            placeholder="请输入身份证"
            prefix-icon="el-icon-search"
            clearable style="width:160px" v-model="ownerQueryDTO.identity">
    </el-input>
    <el-button type="success" icon="el-icon-search" @click="searchOwner">搜索</el-button>

    <el-table
            :data="owners"
            border
            style="width: 95%;margin-top: 10px"
    >
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>

        <el-table-column align="center"
                         prop="userName"
                         label="业主姓名"
                         width="180">
        </el-table-column>

        <el-table-column align="center"
                         prop="headPic"
                         label="业主头像"
                         width="180">
            <template slot-scope="scope">
                <el-image
                        style="height: 150px"
                        :src="scope.row.headPic">
                </el-image>
            </template>

        </el-table-column>

        <el-table-column
                prop="sex"
                label="性别">
            <template slot-scope="scope">
                <el-tag
                        :type="scope.row.sex == '0' ? 'primary' : 'success'"
                        disable-transitions>{{scope.row.sex == '1' ? "张飞" : "闭月"}}
                </el-tag>
            </template>
        </el-table-column>

        <el-table-column
                prop="identity"
                label="身份证">
        </el-table-column>

        <el-table-column
                prop="remarks"
                label="备注">
        </el-table-column>

        <!-- template 自定义模板 -->
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button
                        size="medium"
                        icon="el-icon-edit"
                        @click="handleEdit(scope.row)">编辑
                </el-button>
                <el-button
                        size="medium"
                        icon="el-icon-delete"
                        type="danger"
                        @click="handleDelete(scope.row)">删除
                </el-button>
            </template>
        </el-table-column>

    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 3, 4]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>

    <!-- 回显 (添加和修改 使用同一个dialog) -->
    <el-dialog
            title="添加修改业主"
            :visible.sync="updateDialogVisible"
            width="45%"
             @close="clearData"
            :before-close="handleClose">
        <el-form ref="form" :model="owner" label-width="80px">
            <el-form-item label="业主姓名">
                <el-input v-model="owner.userName"></el-input>
            </el-form-item>
            <el-form-item label="手机号码">
                <el-input v-model="owner.tel"></el-input>
            </el-form-item>

            <el-form-item label="业主性别">
                <el-radio v-model="owner.sex" :label="0">闭月</el-radio>
                <el-radio v-model="owner.sex" :label="1">张飞</el-radio>
            </el-form-item>

            <el-form-item label="身份证">
                <el-input v-model="owner.identity"></el-input>
            </el-form-item>
            <el-form-item label="备注">
                <el-input v-model="owner.remarks"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="addUpdateData">添加修改业主信息</el-button>
                <el-button @click="updateDialogVisible = false">取消</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>

<script>

    new Vue({
        el: "#app",
        data: {
            currentPage: 1,  //当前页面
            pageSize: 2,    // 每页大小
            total: 0,       // 总数
            owners: [],
            owner: {},
            ownerQueryDTO: {},
            updateDialogVisible: false,  //控制显示
            options:[
                {value: '0', label: '闭月'}, //value 是选中的值  label 页面文本的 显示的值
                {value: '1', label: '张飞'}
            ]
        },
        created() {
            //获取数据
            this.initData(this.currentPage, this.pageSize);
        },
        methods: {

            //删除业主
            handleDelete(obj){
                let id = obj.id;
                request({
                    method:"delete",
                    url:`/owner/${id}`
                }).then(resp=>{
                    this.$message({
                        type: 'success',
                        message: resp.data.message
                    });
                    this.initData(this.currentPage, this.pageSize);
                });
            },

            //通过条件搜索 业主
            searchOwner(){
                this.currentPage = 1;
                this.pageSize = 2;
                this.initData(this.currentPage,this.pageSize);
            },

            //关闭dialog 清空事件
            clearData() {
                console.log("dialog关闭了...,清空数据...");
                this.owner = {};
            },

            //发送消息到服务器
            addUpdateData() {
                //添加和修改 写一个请求
                request({
                    method: "post",
                    url: "/owner",
                    data: this.owner
                }).then(resp => {
                    //提示
                    //页面刷新
                    //信息提示
                    this.$message({
                        type: 'success',
                        message: resp.data.message
                    });
                    this.initData(this.currentPage, this.pageSize);

                    //页面关闭
                    this.updateDialogVisible = false;
                })
            },
            //dialog 关闭
            handleClose(done) {
                console.log("dialog关闭了...")
                done();
            },
            //查询 数据库 进行回显
            handleEdit(obj) {
                let id = obj.id;
                request({
                    method: "get",
                    url: `/owner/${id}`
                }).then(resp => {
                    this.owner = resp.data.data;
                    //dialog的回显
                    this.updateDialogVisible = true;
                })
            },
            handleCurrentChange(val) {
                this.currentPage = val;
                this.initData(this.currentPage, this.pageSize);
            },
            handleSizeChange(val) {
                this.pageSize = val;
                this.initData(this.currentPage, this.pageSize);
            },

            initData(currentPage, pageSize) {
                request({
                    method: "post",
                    url: `/owner/list/${currentPage}/${pageSize}`,
                    data:this.ownerQueryDTO
                }).then(resp => {
                    // 拿到分页对象  resp.data.data
                    // 分页对象 后面的data total 是封装的数据
                    this.owners = resp.data.data.data;
                    this.total = resp.data.data.total;
                })
            }
        }
    })
</script>

</body>
</html>